{% include 'include/header.twig.html' %}
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/fileinput.min.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/assets/css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src="/assets/js/eModal.min.js"></script>
<script type="text/javascript" src="/assets/tools/js/md5.js"></script>
<style type="text/css">
    #ui-datepicker-div {
        font-size: 11px;
    }

    .ui-menu-item {
    }

    .ui-autocomplete {
        font-size: 11px;
    }

    body {
        width: auto;
    }
    .container {
        width: auto;
        padding-left: inherit;
    }
</style>
<div class="page-title">
    <div class="title_left" style="width: 1500px">
        <h3 style="font-size: 2em;">url解码/编码|md5</h3>
    </div>
</div>
<br/><br/>
<div class="container">
     <textarea id="ecode" style="width: 600px; height: 200px;" placeholder="编码">
     </textarea>
    <textarea id="ecodeR" style="width: 600px; height: 200px;" placeholder="编码结果">
     </textarea>
    <textarea id="decode" style="width: 600px; height: 200px;" placeholder="解码">
     </textarea>
    <textarea id="decodeR" style="width: 600px; height: 200px;" placeholder="解码结果">
     </textarea>
    <textarea id="md5" style="width: 600px; height: 200px;" placeholder="原文">
     </textarea>
    <textarea id="md5R" style="width: 600px; height: 200px;" placeholder="加密结果">
     </textarea>
    <h5>F12 可查看base64图片</h5>
    <form enctype="multipart/form-data" style="width:1200px;">
        <input id="file-fr" name="file-fr[]" type="file" multiple>
    </form>
</div>

<script type="text/javascript">
    $('#ecode').text('');
    $('#decode').text('');
    $('#ecodeR').text('');
    $('#decodeR').text('');
    $('#md5').text('');
    $('#md5R').text('');
    $('#imgBase64R').text('');
    $(function () {
        $('#ecode').bind('input propertychange', function () {
            $("#ecodeR").text(encodeURI($('#ecode').val()));
        });
        $('#decode').bind('input propertychange', function () {
            $("#decodeR").text(decodeURI($('#decode').val()));
        });
        $('#md5').bind('input propertychange', function () {
            $('#md5R').text($('#md5').val().MD5() + "\n" + $('#md5').val().MD5(32));
        });
    });
    $('#file-fr').fileinput({
        language: 'fr',
        uploadUrl: '#',
        allowedFileExtensions: ['jpg', 'png', 'gif']
    });
</script>

{% include 'include/footer.twig.html' %}